<template>
  <el-row class="handle-contract-module">
    <el-col class="title">经办合同</el-col>
    <el-col class="main-content">
      <el-col class="search">
        <div class="clearfix">
          <div class="fl">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-row type="flex">
                  <el-col :span="6" class="label">合同类型</el-col>
                  <el-col :span="18">
                    <el-select v-model="searchForm.contractType">
                      <el-option
                        v-for="item in searchForm.contractTypeOption"
                        :key="item.optionCode"
                        :label="item.optionValue"
                        :value="item.optionCode"
                      ></el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row type="flex">
                  <el-col :span="6" class="label">状态</el-col>
                  <el-col :span="18">
                    <el-select v-model="searchForm.state">
                      <el-option
                        v-for="item in searchForm.stateOption"
                        :key="item.optionCode"
                        :label="item.optionValue"
                        :value="item.optionCode"
                      ></el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
          <div class="fr">
            <el-row type="flex" :gutter="24">
              <el-col class="search-content">
                <el-input
                  placeholder="请搜索合同内容"
                  suffix-icon="el-icon-search"
                  v-model="searchForm.contractContent"
                ></el-input>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" @click="selectCallback">查询</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col>
        <el-table :data="contractData" class="table">
          <el-table-column
            v-for="item in columns"
            :prop="item.prop"
            :label="item.label"
            :key="item.prop"
          ></el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button type="text" @click="goToContract(row)">查看合同</el-button>
              <el-button type="text" @click="downloadContract(row)">下载合同</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" v-if="total" :total="total"></el-pagination>
      </el-col>
    </el-col>
  </el-row>
</template>
<script>
import { getProductMaterial } from "@/api";
export default {
  name: "productManage",
  data() {
    return {
      searchForm: {
        contractType: "all",
        contractTypeOption: [
          {
            optionCode: "all",
            optionValue: "全部"
          },
          {
            optionCode: "1",
            optionValue: "1"
          },
          {
            optionCode: "2",
            optionValue: "2"
          }
        ],
        state: "all",
        stateOption: [
          {
            optionCode: "all",
            optionValue: "全部"
          },
          {
            optionCode: "1",
            optionValue: "1"
          },
          {
            optionCode: "2",
            optionValue: "2"
          }
        ],
        contractContent: ""
      },
      planNo: "",
      columns: [
        {
          prop: "stationNo",
          label: "序号"
        },
        {
          prop: "contractType",
          label: "合同类型"
        },
        {
          prop: "company",
          label: "对方公司"
        },
        {
          prop: "state",
          label: "当前状态"
        },
        {
          prop: "sign",
          label: "签署人"
        },
        {
          prop: "time",
          label: "发起时间"
        }
      ],
      contractData: [
        {
          contractType: "设计作品版权出售",
          company: "团团圆家具有限公司",
          state: "双方已盖章",
          sign: "签署人",
          time: "2020-10-10 12:32:43"
        },
        {
          contractType: "设计作品版权出售",
          company: "团团圆家具有限公司",
          state: "对方已盖章",
          sign: "---",
          time: "2020-10-10 12:32:43"
        }
      ],
      pageNum: 1,
      pageSize: 20,
      total: 0
    };
  },
  methods: {
    goToContract(row) {},
    downloadContract(row) {},
    selectCallback() {
      this.getTableList();
    },
    getTableList() {
      const params = {
        planNo: this.planNo,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      };
      getProductMaterial(params).then(res => {
        if (res.data.code === "0") {
          this.contractData = res.data.data.rows;
          this.total = res.data.data.total;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.handle-contract-module {
  .title {
    margin-bottom: 20px;
    padding: 0 10px;
    height: 60px;
    line-height: 60px;
    box-shadow: 0px 2px 4px 0px #d1d9e2;
  }
  .main-content {
    background-color: #fff;
    padding: 10px;

    .search {
      padding-bottom: 10px;
      .label {
        display: inline-block;
        vertical-align: middle;
        color: #606266;
        line-height: 32px;
        font-size: 14px;
        // text-align: right;
        // margin-right: 5px;
      }
    }
    .table {
      margin: 10px 0;
    }
    .search-content {
      /deep/.el-input--small .el-input__inner {
        border-radius: 16px;
      }
    }
  }
}
</style>